<style rel="stylesheet/scss" lang="scss" scoped>
.title1 {
  font-size: 14px;
  height: 32px;
  padding-left: 10px;
  line-height: 32px;
  background-color: #d7d7d8;
}
.itemform {
  margin-top: 20px;
  // display: inline-flex;
  // display: -webkit-inline-flex;
  // justify-content: flex-start;
  // flex-wrap: wrap;
}
.itemblock {
  // width: 50%;
}
.el-form--inline .el-form-item {
  margin-right: 0 !important;
}
.itembloc1 {
  width: 45%;
}
.itembloc2 {
  // width: 30%;
}
.green {
  display: inline-block;
}
  
.green-div {
  border-width: 0px;
  left: 0px;
  top: 0px;
  width: 300px;
  height: 37px;
  background: inherit;
  background-color: rgba(95, 184, 120, 1);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: "Microsoft YaHei UI";
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #ffffff;
  line-height: 37px;
  text-align: center;
}
#green-div1 {
  border-width: 0px;
  left: 0px;
  top: 0px;
  width: 222px;
  height: 37px;
  background: inherit;
  background-color: rgba(95, 184, 120, 1);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: "Microsoft YaHei UI";
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #ffffff;
  line-height: 37px;
}
.borderline {
  width: 100%;
  height: 2px;
  background-color: #d7d7d8;
}
.bottomline {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
}
.marginleft {
  margin-left: 20px;
}
.isearch {
  line-height: 40px;
}
.itop {
  margin-top: 10px;
}
.cus-conditon {
  margin-top: 10px;
  margin-left: 10px;
}
</style>
<template>
  <div class="app-container calendar-list-container">
    <div class>
      <div class="filter-container">
        <el-input
          style="width: 200px;"
          class="filter-item"
          placeholder="请输入机型全码"
          v-model="plmArticleNo"
        ></el-input>
        <el-button class="filter-item" type="primary" icon="search" @click="search()">拉取产品数据</el-button>
      </div>
      <custom-card title="产品信息" class="mt-20">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="name" label="产品名称" align="center"></el-table-column>
          <el-table-column prop="plmModelNo" label="机型号" align="center"></el-table-column>
          <el-table-column prop="pdsArticleNo" label="机型全码" align="center"></el-table-column>
          <el-table-column prop="customerNames" label="客户" align="center"></el-table-column>
        </el-table>
      </custom-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <custom-card title="价格计算" class="mt-20">
          <el-card class="box-card">
            <div class="title1">产品成本</div>
            <div class="itemform">
              <!-- <div class="isearch">
                  <i class="el-icon-search"></i>
              </div>-->
              <el-row :gutter="0">
                <el-col :span="12" :xs="24">
                  <el-form-item label="整机BOM国产成本(未税)：" :label-width="'200px'" class="itemblock">
                    <el-input type="number" v-model="formInline.bomPrice" placeholder></el-input>
                  </el-form-item>
                  <!-- <div class="isearch">
                  <i class="el-icon-search"></i>
                  </div>-->
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item label="人工成本：" :label-width="'200px'" class="itemblock">
                    <el-input type="number" v-model="formInline.laborCost" placeholder></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item label="包装成本(未税)：" :label-width="'200px'" class="itemblock">
                    <el-input type="number" v-model="formInline.packagePrice" placeholder></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item label="变动制费：" :label-width="'200px'" class="itemblock">
                    <el-input type="number" v-model="formInline.changeCost" placeholder></el-input>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="12" :xs="24">
                  <el-form-item label="标准工时：" :label-width="'200px'" class="itemblock">
                    <el-input type="number" v-model="formInline.standardWorkingHours" placeholder></el-input>
                  </el-form-item>
                </el-col> -->
              </el-row>

              <!-- <el-form-item label="人工成本：" class="itemblock">
                <el-input type="number" v-model="formInline.user" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="包装成本  (未税)：" class="itemblock">
                <el-input type="number" v-model="formInline.user" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="变动制费：" class="itemblock">
                <el-input type="number" v-model="formInline.user" placeholder=""></el-input>
              </el-form-item>-->
            </div>
          </el-card>
          <el-card class="box-card">
            <div class="title1">进口料件成本</div>
            <div class="itemform">
              <el-form-item label="本币未税成本RMB：" :label-width="'200px'" class="itemblock1">
                <el-input type="number" v-model="formInline.currencyCost" placeholder></el-input>
              </el-form-item>
            </div>
          </el-card>
          <el-card class="box-card">
            <div class="title1">内陆运输成本</div>
            <div class="itemform">
              <el-form-item label="内陆运费比率：" :label-width="'200px'" class="itemblock1">
                <el-input type="number" v-model="formInline.inlandRate" placeholder>
                </el-input>
              </el-form-item>
            </div>
          </el-card>
          <el-card class="box-card">
            <div class="title1">产品项目开发费用</div>
            <div class="itemform">
              <el-form-item label="产品项目开发费用分摊：" :label-width="'200px'" class="itemblock1">
                <el-input type="number" v-model="formInline.projectDevelopCost" placeholder></el-input>
              </el-form-item>
            </div>
          </el-card>
          <el-card class="box-card">
            <div class="title1">公司管理费用分摊</div>
            <div class="itemform">
              <el-row>
                <el-col :span="12" :xs="24">
                  <el-form-item label="管理费用分摊比率：" :label-width="'200px'" class="itemblock2">
                    <el-input type="number" v-model="formInline.manageCostRate" placeholder>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item label="制造费用分摊比率：" :label-width="'200px'" class="itemblock2">
                    <el-input type="number" v-model="formInline.manufactureCostRate" placeholder>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item label="研发费用分摊比率（老产品)：" :label-width="'200px'" class="itembloc2">
                    <el-input type="number" v-model="formInline.researchCostOldRate" placeholder>
                      <!-- <template slot="append">%</template> -->
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item label="研发费用分摊比率（新产品)：" :label-width="'200px'" class="itembloc2">
                    <el-input type="number" v-model="formInline.researchCostNewRate" placeholder>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item label="财务费用分摊比率：" :label-width="'200px'" class="itemblock2">
                    <el-input type="number" v-model="formInline.financeCostRate" placeholder>
                      <!-- <template slot="append">%</template> -->
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item label="营销费用分摊比率：" :label-width="'200px'" class="itemblock2">
                    <el-input type="number" v-model="formInline.marketingCostRate" placeholder>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-card>
          <el-card class="box-card">
            <div class="title1">抗风险系数</div>
            <div class="itemform">
              <el-form-item label="风险变动比率：" :label-width="'200px'" class="itemblock1">
                <el-input type="number" v-model="formInline.riskChangeCostRate" placeholder>
                  <!-- <template slot="append">%</template> -->
                </el-input>
              </el-form-item>
            </div>
          </el-card>
          <div class="borderline">
          </div>
          <div class="bottomline">
          <div class="green-div">产品全成本：{{formInline.fullCost}}</div>
          </div>
          <el-card class="box-card">
            <div class="title1">出口业务成本</div>
            <div class="itemform">
              <el-row>
                <el-col :span="12" :xs="24">
                  <el-form-item label="不得免征和抵扣额比率：" :label-width="'200px'"  class="itemblock2">
                    <el-input type="number" v-model="formInline.deductionRate" placeholder>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item label="美金操作费率：" :label-width="'200px'" class="itemblock2">
                    <el-input type="number" v-model="formInline.usOperationRate" placeholder>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item label="退税利息费率：" :label-width="'200px'"  class="itemblock2">
                    <el-input type="number" v-model="formInline.rebateRate" placeholder>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item label="报价类型：" :label-width="'200px'"  class="itemblock2">
                    <el-select placeholder="报价类型" v-model="formInline.quoteTypeDv" clearable>
                      <el-option
                        v-for="option in filter.options.pds_customer_offer_type"
                        :key="option.id"
                        :label="language=='en'?option.labelEnUs:option.labelZhCh"
                        :value="option.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-card>
          <el-card class="box-card">
            <div class="title1">利润率</div>
            <div class="itemform">
              <el-form-item label="利润率：" :label-width="'200px'"  class="itemblock1">
                <el-input type="number" v-model="formInline.profitRate" placeholder>
                </el-input>
              </el-form-item>
            </div>
          </el-card>
          <el-card class="box-card">
            <div class="title1">客户条款</div>
            <div class="itemform">
              <el-row>
                <el-col :span="12" :xs="24">
                  <el-form-item label="客户：" :label-width="'200px'"  class="itemblock2">
                    <el-select
                      placeholder="请选择客户"
                      v-model="formInline.customerCode"
                      filterable
                      remote
                      reserve-keyword
                      :remote-method="getPdsCustomerByName"
                      clearable
                    >
                      <el-option
                        v-for="option in customerList"
                        :key="option.value"
                        :label="language=='en'?option.labelEnUs:option.labelZhCh"
                        :value="option.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item label="客户条款：" :label-width="'200px'"  class="itemblock2">
                    <el-input type="number" v-model="formInline.customerTeramsRate" placeholder>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-card>
          <div class="borderline"></div>
          <div class="bottomline">
            <div class="green-div">最终FOB报价：￥{{formInline.fobQuote}}</div>
            <div class="green-div marginleft">FOB美金报价：{{formInline.fobUsQuote}}</div>
          </div>
               <el-form-item>
                <el-button type="primary" size="big" @click="submit()" >计算</el-button>
              </el-form-item>
        </custom-card>
      </el-form>
    </div>
  </div>
</template>
<script>
// import * as api from '@/api/product/cost/index';
import * as saleApi from "@/api/sale/index";
import * as baseApi from "@/api/common/index";
import * as api from "@/api/price/index";

export default {
  data() {
    return {
      searchContent: "",
      customerList: [],
      filter: {
        customerCode: null,
        options: {}
      },
      formInline: {},
      tableData: [],
      plmArticleNo: "",
      formData: undefined,
    };
  },
   watch: {
    'formInline.customerCode'(val) {
      this.getTermsSum(val);
    },
  },
  created() {
    this.getDict();
  },
  methods: {
    search() {
      api
        .getProductPrice({ plmArticleNo: this.plmArticleNo })
        .then(response => {
          this.tableData = [];
          this.tableData.push(
            response.data.pdsFileModelPbsDTO.pdsFileModelBaseDto
          );
          this.formInline = response.data.priceDetailsVO
          this.formData = JSON.parse(JSON.stringify( response.data));
        });
    },
    getTermsSum(val) {
            api
        .getTermsSum({ customerCode: val })
        .then(response => {
          this.$set(this.formInline, 'customerTeramsRate', response);
        });

    },
    // 获取字典选项
    getDict() {
      const codes = "pds_customer_offer_type";
      baseApi.getTypesValue(codes).then(res => {
        const arr = codes.split(",");
        this.filter.options = res.data;
      });
    },
    getPdsCustomerByName(val) {
      if (val !== "") {
        saleApi
          .getPdsCustomerByName({
            customerName: val
          })
          .then(res => {
            res.data.map(row => {
              row.labelEnUs = row.shortName;
              row.labelZhCh = row.shortName;
              row.value = row.code;
            });
            this.customerList = res.data;
          });
      }
    },
    submit() {
      this.formData.priceDetailsVO = JSON.parse(JSON.stringify(this.formInline));
      api.countQuoteByPriceDatail(this.formData).then(res => {
                this.$set(this.formInline, 'fobQuote',  res.data.priceDetailsVO.fobQuote);
                this.$set(this.formInline, 'fullCost',  res.data.priceDetailsVO.fullCost);
                this.$set(this.formInline, 'fobUsQuote',  res.data.priceDetailsVO.fobUsQuote);
          });
    },
  }
};
</script>
